<!--
 * @Description: VUEX测试组件
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020-08-04 15:14:43
 * @LastEditTime: 2020-08-05 19:11:39
-->
<template>
  <div class="hello">
    <h1>{{ $store.state.test }}</h1>
    <h1>{{ test }}</h1>
    <h3>{{ test2 }}</h3>
    <h3>{{ $store.getters.test2 }}</h3>
    <h4>{{ userInfo.name }}</h4>
    <h5>{{ test3 }}</h5>
    <input type="text"
           v-model="inputVal">
    <button @click="changeHelloTxt">改变1</button>
    <button @click="setTest(inputVal)">改变2</button>
    <button @click="changeHelloTxtAsync">延时改变1</button>
    <button @click="setTestAsync(inputVal)">延时改变2</button>
    <button @click="getUserInfo">获取用户信息</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters, createNamespacedHelpers } from "vuex"
const mapState1 = createNamespacedHelpers('mod1').mapState
export default {
  name: 'HelloWorld',
  data () {
    return {
      inputVal: ""
    }
  },
  computed: {
    ...mapState(["test", "userInfo"]),
    ...mapGetters(["test2"]),
    ...mapState1(["test3"])
  },
  methods: {
    ...mapMutations(["setTest"]),
    ...mapActions(["setTestAsync", "getUserInfo"]),
    changeHelloTxt () {
      this.$store.commit("setTest", this.inputVal)
      //this.setTest(this.inputVal)
    },
    changeHelloTxtAsync () {
      this.$store.dispatch("setTestAsync", this.inputVal)
      //this.setTestAsync(this.inputVal)
    }
  }
}
</script>

<style scoped lang="scss">
</style>
